<template>
  <div>
    <mt-swipe :auto="4000">
      <!-- lunbotuList应该是父组件传过来到的 -->
      <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
        <img :src="item.image_url" :class="{'full':isfull}"/>
      </mt-swipe-item>
    </mt-swipe>
  </div>
  <!-- 分析：为什么商品页面轮播图丑 -->
  <!-- 1.首页中的图片宽高，都是使用了 100% -->
  <!-- 2.在商品详情页面中，轮播图的图片，如果也使用宽高为100%，页面不好看 -->
  <!-- 3.商品详情页面中的轮播图，期望高度100%，宽度自适应 -->
  <!-- 4.经过分析，得到问题的原因：首页中轮播图和详情中的轮播器，分歧点是宽度到底是100%还是自适应 -->
  <!-- 5.既然这两个轮播图，其他方面没冲突，只是宽度有分歧，我们可以定义一个属性，让轮播图的调用者，手动指定是否为100%的宽度 -->
</template>
<script>
export default {
  props:['lunbotuList','isfull']
}
</script>
<style lang="scss" scoped>
.mint-swipe{
    height:200px;
    text-align:center;
    .mint-swipe-item{
        &:nth-child(1){
            background-color: red;
        }
        &:nth-child(2){
            background-color: blue;
        }
        &:nth-child(3){
            background-color: green;
        }
        img{
            width:100%;
            height:100%;
        }
    }
}
.full{
  width:100%;
}

</style>


